<template>
    <div :class="$style.registerPage">
        <img :class="$style.logoImg" src="/logo.png" alt="">
        <div :class="$style.titleText">福汇交易所</div>
        <lay-form ref="formRef" :model="formData" :rules="formRules">
            <lay-form-item label="" prop="email" class="mb30">
                <lay-input v-model="formData.email" placeholder="邮箱" prefix-icon="layui-icon-email" :allow-clear="true" @input="writeInp">
                </lay-input>
            </lay-form-item>
            <lay-form-item label="" prop="password1" class="mb30">
                <lay-input v-model="formData.password1" placeholder="登录密码" prefix-icon="layui-icon-password" :allow-clear="true" type="password" password @input="writeInp">
                </lay-input>
            </lay-form-item>
            <lay-form-item label="" prop="password2" class="mb30">
                <lay-input v-model="formData.password2" placeholder="确认密码" prefix-icon="layui-icon-password" :allow-clear="true" type="password" password @input="writeInp">
                </lay-input>
            </lay-form-item>
            <lay-form-item label="" prop="code" class="mb30 codeItem">
                <lay-input v-model="formData.code" placeholder="验证码" prefix-icon="layui-icon-vercode" :allow-clear="true" @input="writeInp">
                </lay-input>
                <lay-button border="blue" @click="sendCode">获取验证码</lay-button>
            </lay-form-item>
            <lay-form-item label="" prop="invite" class="mb30">
                <lay-input v-model="formData.invite" placeholder="邀请码" prefix-icon="layui-icon-test" :allow-clear="true" @input="writeInp">
                </lay-input>
            </lay-form-item>
            <lay-form-item class="mb0">
                <lay-button type="primary" :class="[$style.submitBtn, formFlag ? $style.submitBtn2 : $style.submitBtn1]" @click="submitForm">注册</lay-button>
            </lay-form-item>
        </lay-form>
        <div :class="$style.bottomBlock">
            <div :class="$style.bottomLeft" @click="dotoLogin">登录</div>
        </div>
    </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
    name: "Register",
    data() {
        return {
            formData: {
                email: '',
                password1: '',
                password2: '',
                code: '',
                invite: '',
            },
            formRules: {
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { validator: this.validateEmail, trigger: 'blur' }
                ],
                password1: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                password2: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: this.validatePassword2, trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ],
            },
            formFlag: false,
        };
    },
    methods: {
        dotoLogin() {
            this.$router.go(-1);
        },
        submitForm() {
            let that = this;
            that.$refs.formRef.validate(valid => {
                if (valid) {
                    that.formFlag = true;
                    let para = {
                        email: that.formData.email,
                        lpwd: that.formData.password1,
                        code: that.formData.code,
                        invit: that.formData.invite,
                    }
                    let loadIndex = that.$layer.load();
                    that.$axios.post('/api/Login/register', para).then((res) => {
                        that.$layer.close(loadIndex);
                        that.$layer.msg(res.data.message, { time: 1000 });
                        if (res.data.code != 200) {
                            return;
                        }
                        setTimeout(() => {
                            that.$router.go(-1);
                        }, 1000)
                    }).catch((err) => {
                        that.$layer.close(loadIndex);
                        that.$layer.msg('注册失败,请重试', { time: 1000 });
                    });
                } else {
                    this.formFlag = false;
                    return false;
                }
            });
        },
        sendCode() {
            let that = this;
            if (!that.$dict.regEmail(that.formData.email)) {
                that.$layer.msg('请输入正确的邮箱地址', { time: 1000 })
                return;
            }
            let para = {
                email: that.formData.email,
                type: 'register',
            }
            let loadIndex = that.$layer.load();
            that.$axios.post('/api/Login/sendcode', para).then((res) => {
                that.$layer.close(loadIndex);
                that.$layer.msg(res.data.message, { time: 1000 });
            }).catch((err) => {
                that.$layer.close(loadIndex);
                that.$layer.msg('验证码获取失败', { time: 1000 });
            });
        },
        writeInp() {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    this.formFlag = true;
                } else {
                    this.formFlag = false;
                    return false;
                }
            });
        },
        validatePassword2(rule, value, callback) {
            if (this.formData.password1 == value) {
                callback();
            } else {
                if (!this.formData.password1) {
                    callback(new Error('请输入登录密码'));
                } else if (this.formData.password1 != value) {
                    callback(new Error('两次输入的密码不一致'));
                }
            }
        },
        validateEmail(rule, value, callback) {
            if (this.$dict.regEmail(value)) {
                callback();
            } else {
                callback(new Error('邮箱格式不正确'));
            }
        },
    },
});
</script>
<style module>
.registerPage {
    width: 100%;
    height: 100vh;
    background-color: #0D1014;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 20px;
    overflow-y: auto;
}

.logoImg {
    display: block;
    width: 130px;
    height: 130px;
}

.titleText {
    width: 100%;
    text-align: center;
    font-family: Source Han Sans;
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    color: #FFFFFF;
    margin-bottom: 46px;
}

.submitBtn {
    width: 520px;
    height: 50px;
    color: #000000;
    font-family: Source Han Sans;
    font-size: 20px;
    border-color: rgba(225, 225, 225, 0.1);
}

.submitBtn1 {
    background-color: #D1D5DB;
}

.submitBtn2 {
    background-color: #F7D8A7;
}

.bottomBlock {
    width: 520px;
    height: 20px;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.bottomLeft {
    cursor: pointer;
    font-family: Source Han Sans;
    font-size: 14px;
    color: #FFFFFF;
}
</style>
<style scoped>
.layui-form-item {
    width: 520px;
    align-items: center;
}

.layui-form-item.mb30 {
    height: 52px;
    margin-bottom: 30px;
}

.layui-form-item.mb0 {
    margin-bottom: 0px;
}

.layui-form-item.codeItem :deep(.layui-input-block>div) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.layui-form-item.codeItem :deep(.layui-input) {
    width: 350px;
}

.layui-form-item.codeItem :deep(.layui-btn) {
    width: 150px;
    height: 52px;
    cursor: pointer;
}

.layui-input {
    height: 50px;
    background-color: #22252F;
    border-color: rgba(225, 225, 225, 0.1);
}

.layui-input :deep(input) {
    color: #FFFFFF;
}

.layui-input :deep(input::placeholder) {
    color: rgba(255, 255, 255, 0.5);
}

.layui-input :deep(.layui-input-prefix) {
    color: #FFFFFF;
}

.layui-input :deep(.layui-input-clear) {
    color: #FFFFFF;
    opacity: 0.5;
    cursor: pointer;
}

.layui-input :deep(.layui-input-clear:hover) {
    opacity: 1;
}

.layui-input :deep(.layui-input-password) {
    color: #FFFFFF;
    opacity: 0.5;
    cursor: pointer;
}

.layui-input :deep(.layui-input-password:hover) {
    opacity: 1;
}
</style>